import { useRequest } from 'ahooks'
import * as echarts from 'echarts'
//全局引入 ，可按需引入
import { useContext, useEffect, useRef } from 'react'

import { ContentTsx } from '../contentTsx'
import { cyJiguan } from '../data'
import china from './China.json'

export function DomicileMap(props: any) {
  const { selectedAssociationItem, refreshFlag } = useContext(ContentTsx)
  const chartRef = useRef<any>()
  // const echartsMapClick = () => {
  //   //点击地图模块逻辑事件
  // }
  const { data: mapData, run } = useRequest(
    async () => {
      const { data } = await cyJiguan({ entId: selectedAssociationItem.key })
      return data
    },
    {
      refreshDeps: [selectedAssociationItem.key, refreshFlag]
    }
  )

  useEffect(() => {
    if (mapData) {
      const mapName = 'china'
      const data: any = china
      let maxValue = 100
      if (mapData && mapData.length) {
        maxValue = Math.max(
          ...mapData?.map((obj: { name: string; value: number }) => obj.value)
        )
      }
      const myChart = echarts.init(chartRef.current)
      echarts.registerMap(mapName, data)
      const option = {
        tooltip: {
          show: false
        },
        // tooltip: {
        //   // backgroundColor: 'rgba(21, 24, 45, 0.9)', // 提示框浮层的背景颜色。
        //   textStyle: {
        //     // 提示框浮层的文本样式。
        //     color: "#fff",
        //     fontSize: 14
        //   },
        //   borderColor: "none",
        //   extraCssText: "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);border:none",
        //   formatter: function (params: any) {
        //     //数据格式化
        //     const val = params.value ? params.value : 0
        //     return `<div class='echarts_tooltip_tit'>实名用户</div><div class='echarts_tooltip_content'>
        //     <div class='echarts_tooltip_item'><div class='echarts_tooltip_name'>${
        //       params.name
        //     }</div><div class='echarts_tooltip_value'>${priceSwitch(val)}人</div>
        //     </div>`
        //   }
        // },
        // 设置每个市区的默认颜色
        itemStyle: {
          areaColor: 'rgba(79, 51, 38, 1)',
          borderColor: 'rgba(255,255,255,0.2)'
        },
        //范围图例
        visualMap: {
          min: 0,
          max: maxValue,
          left: 'left',
          top: 'bottom',
          itemWidth: 4,
          itemHeight: 46,
          textGap: 2,
          text: ['高', '低'], //取值范围的文字
          textStyle: {
            color: '#fff',
            fontSize: 12,
            fontStyle: 'normal'
          },
          inRange: {
            color: ['rgba(76, 49, 35, 1)', 'rgba(246, 110, 44, 1)'] //取值范围的颜色
          },
          show: true //图注
        },
        //地图的绘制
        geo: {
          map: 'china',
          roam: false, //不开启缩放和平移
          zoom: 1.23, //视角缩放比例
          // 图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
          label: {
            normal: {
              show: true,
              fontSize: '11px',
              color: 'rgba(255,255,255,0.8)'
              // textBorderColor: "rgba(255,255,255,0.9)", // 文字描边颜色
              // textBorderWidth: 0.1 // 文字描边宽度
              // border: "1px solid rgba(255,255,255,0.9)",
              // textStroke: "1px rgba(255,255,255,0.9)"
            },
            emphasis: {
              textStyle: {
                color: '#fff' // 鼠标经过时的文字颜色
              }
            }
          },
          // 在地图中对特定的区域配置样式
          // regions: getRegionsData(),
          // 地图区域的多边形 图形样式。
          itemStyle: {
            normal: {
              borderColor: 'rgba(255,255,255,0.2)'
            },
            // 高亮状态下的多边形和标签样式。
            emphasis: {
              areaColor: 'rgba(246, 110, 44, 1)', //鼠标选择区域颜色
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              borderColor: 'rgba(255,255,255,1)', // 描边颜色
              borderWidth: 1, // 描边宽度
              shadowColor: 'rgba(255,255,255,1)'
            }
          }
        },
        series: [
          {
            name: '人口',
            type: 'map',
            geoIndex: 0,
            data: mapData || [],
            selectedMode: 'none' //设置为'none'去掉点击样式
          }
        ]
      }
      myChart.setOption(option) //绘图
      // //点击画布内还是画布外
      // myChart.getZr().on("click", (params) => {
      //   if (params.target) {
      //     myChart.on("click", echartsMapClick) //增加点击事件
      //   }
      // })
    }
  }, [mapData])

  return (
    <div style={{ marginTop: 19, height: 300, overflow: 'hidden' }}>
      <div
        style={{
          fontSize: 16,
          color: '#ffffff',
          marginBottom: 12,
          fontFamily: 'PuHuiTi-Bold',
          position: 'absolute'
        }}
      >
        籍贯分析
      </div>
      <div style={{ width: '100%', height: '300px' }} ref={chartRef} />
    </div>
  )
}
